<template>
  <div>
    <!-- 商品信息 -->
    <div>
      <h2>商品信息</h2>
      <hr />
      <el-descriptions>
        <el-descriptions-item label="商品SUP">{{
          prod.prodSpu
        }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{
          prod.prodName
        }}</el-descriptions-item>
        <el-descriptions-item label="商品类型">{{
          prod.kindName
        }}</el-descriptions-item>
        <el-descriptions-item label="商品分类">{{
          prod.typeName
        }}</el-descriptions-item>
        <el-descriptions-item label="商品品牌">{{
          prod.brandName
        }}</el-descriptions-item>
        <el-descriptions-item label="商品状态">
          <el-tag type="primary" v-if="prod.prodStatus == 1">待审核</el-tag>
          <el-tag type="success" v-if="prod.prodStatus == 2">已上架</el-tag>
          <el-tag type="danger" v-if="prod.prodStatus == 3">已下架</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <hr />
    <h2>商品信息</h2>
    <el-button type="primary" @click="onaddProdInfo()">添加商品SKU</el-button>
    <div>
      <el-table :data="prodInfo" stripe style="width: 100%">
        <el-table-column prop="infoId" label="序号" />
        <el-table-column prop="prodSku" label="SKU" />
        <el-table-column prop="prodName" label="商品名称" />
        <el-table-column prop="prodPrice" label="售价" />
        <el-table-column prop="prodStock" label="库存" />
        <el-table-column prop="createBy" label="创建人" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" />
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="searchForm.pageNum"
        v-model:page-size="searchForm.pageSize"
        :page-sizes="[1, 2, 3, 4]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 添加商品SKU弹出框 -->
    <div>
      <el-dialog
        v-model="dialogVisible"
        title="添加商品"
        width="500"
        :before-close="handleClose"
      >
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
        >
          <el-form-item label="商品SKU" prop="prodSku">
            <el-input v-model="ruleForm.prodSku" />
          </el-form-item>
          <el-form-item label="商品名称" prop="prodName">
            <el-input v-model="ruleForm.prodName" />
          </el-form-item>
          <el-form-item label="商品售价" prop="prodPrice">
            <el-input-number min="0" v-model="ruleForm.prodPrice" />
          </el-form-item>
          <el-form-item label="商品成本价" prop="costPrice">
            <el-input-number min="0" v-model="ruleForm.costPrice" />
          </el-form-item>
          <el-form-item label="商品库存" prop="prodStock">
            <el-input-number min="0" v-model="ruleForm.prodStock" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              提交
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useRoute } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import type { ComponentSize } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import {
  addProdInfo,
  selectProdInfo,
  selectProdInfoByProdId,
} from "../api/api";
const route = useRoute();
const dialogVisible = ref(false);
let prodId = route.params.prodId;
const onaddProdInfo = () => {
  ruleForm.value = {
    buyNum: 0,
    costPrice: 0,
    infoId: 0,
    prodId: prodId,
    prodName: "",
    prodPrice: 0,
    prodSku: "",
    prodStock: 0,
  };
  dialogVisible.value = true;
};

const ruleFormRef = ref<FormInstance>();
const ruleForm = ref({
  buyNum: 0,
  costPrice: 0,
  infoId: 0,
  prodId: prodId,
  prodName: "",
  prodPrice: 0,
  prodSku: "",
  prodStock: 0,
});

const locationOptions = ["Home", "Company", "School"];

const rules = reactive<FormRules>({
  prodSku: [{ required: true, message: "请输入商品SKU", trigger: "blur" }],
  prodName: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
  prodPrice: [{ required: true, message: "请输入商品售价", trigger: "blur" }],
  costPrice: [{ required: true, message: "请输入商品成本价", trigger: "blur" }],
  prodStock: [{ required: true, message: "请输入商品库存", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      addProdInfo(ruleForm.value).then((res) => {
        if (res.data.flag) {
          ElMessage.success("添加成功");
          getProdInfo();
          dialogVisible.value = false;
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));

const prod = ref({
  prodId: 3,
  prodSpu: "HW013",
  prodKind: 1,
  kindName: null,
  prodType: 8,
  typeName: null,
  prodName: "华为Mate60",
  brandId: 1,
  brandName: null,
  prodStatus: 3,
  createBy: "zhangsan",
  createTime: "2025-06-28 08:04:57",
  updateBy: null,
  updateTime: null,
  unitId: 3,
  unitName: null,
  tagId: 5,
  tagName: null,
  appr: "华为",
  prodImage:
    "http://192.168.80.192:8888/group1/M00/00/02/wKhQwGhdqQyACoArAAwRRTO8YF8014.jpg",
});
const prodInfo = ref([]);

const total = ref(0);
const size = ref<ComponentSize>("default");
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  searchForm.value.pageSize = val;
  getProdInfo();
};
const handleCurrentChange = (val: number) => {
  searchForm.value.pageNum = val;
  getProdInfo();
};

const getProdDetail = () => {
  selectProdInfo(prodId).then((res) => {
    prod.value = res.data.data;
  });
};

const searchForm = ref({
  pageNum: 1,
  pageSize: 2,
});

const getProdInfo = () => {
  selectProdInfoByProdId(searchForm.value, prodId).then((res) => {
    prodInfo.value = res.data.data.records;
    total.value = res.data.data.total;
  });
};

onMounted(() => {
  getProdDetail();
  getProdInfo();
});
</script>
